:root {
  /* 亮色模式配色 */
  --bg-color: #f4f7fb; /* 更柔和的米白色背景 */
  --text-color: #2b3a42; /* 深灰色文本，更清晰易读 */
  --button-bg: #3b82f6; /* 更鲜明的蓝色按钮 */
  --button-text-color: #ffffff;
  --card-bg: #ffffff; /* 纯白卡片 */
  --link-color: #0061f2; /* 深蓝色链接，增强对比度 */

  /* 辅助变量 */
  --border-color: #d1d8e0; /* 更浅的灰色边框 */
  --input-bg: #ffffff;
  --input-text: #2b3a42;
  --input-border: #dbe2e7; /* 轻微灰色边框 */
  --hover-bg: #f1f5fb; /* 浅蓝色悬停背景 */
  --shadow-color: rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
  --header-bg: #ffffff;
  --footer-bg: #f7fafc; /* 极浅灰色页脚 */

  /* 状态色 */
  --success-color: #34d399; /* 清新的绿色 */
  --warning-color: #f59e0b; /* 保持琥珀色 */
  --error-color: #ef4444; /* 强烈的红色 */

  /* 滚动条 */
  --scrollbar-bg: #f4f7fb;
  --scrollbar-thumb: #d1d8e0;
}

html.dark {
  /* 暗色模式配色 */
  --bg-color: #2d3748; /* 深灰蓝色背景 */
  --text-color: #edf2f7; /* 轻灰蓝色文本，增强对比 */
  --button-bg: #6366f1; /* 更亮的靛蓝色按钮 */
  --button-text-color: #ffffff;
  --card-bg: #374151; /* 更深的灰蓝色卡片 */
  --link-color: #60a5fa; /* 更亮的蓝色链接 */

  /* 辅助变量 */
  --border-color: #4a5568; /* 中等灰蓝色边框 */
  --input-bg: #374151;
  --input-text: #edf2f7;
  --input-border: #4a5568;
  --hover-bg: #2d3748; /* 卡片颜色作为悬停背景 */
  --shadow-color: rgba(0, 0, 0, 0.3);
  --header-bg: #2d3748;
  --footer-bg: #2d3748;

  /* 状态色保持相同或微调 */
  --success-color: #34d399;
  --warning-color: #f59e0b;
  --error-color: #ef4444;

  /* 滚动条 */
  --scrollbar-bg: #374151;
  --scrollbar-thumb: #4a5568;
}


body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Arial', sans-serif;
  transition: background-color 0.3s, color 0.3s; /* 为过渡添加动画效果 */
}

a {
  color: var(--link-color);
  text-decoration: none;
}

button {
  background-color: var(--button-bg);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: darken(var(--button-bg), 10%);
}

.card {
  background-color: var(--card-bg);
  color: var(--text-color);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
